// 2. 导入Vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

// 3. 配置Vuex插件
Vue.use(Vuex)

// 4. 创建store实例对象
const store = new Vuex.Store({
  // 状态
  state: {
    length: 0,
    list: []
  },
  // 变更状态
  mutations: {
    // 更新长度
    updateLength (state, payload) {
      state.length = payload
    },
    updateList (state, payload) {
      state.list = payload
    }
  },
  // 处理异步任务
  actions: {
    // 调用后端接口获取数据
    async queryData (context, payload) {
      // context 和$store扮演的角色类似
      // payload 表示dispatch传递的参数
      console.log(payload)
      const ret = await axios.get('http://test.zjie.wang/tab')
      // 在action中不可以直接修改状态：但是可以触发mutation修改状态
      context.commit('updateLength', ret.data.list.length)
      context.commit('updateList', ret.data.list)
    }
  },
  // 类似于Vue的计算属性：基于已有的数据计算另一种数据
  getters: {
    favoriteList (state) {
      const list = state.list.filter((item, index) => {
        return index < 2
      })
      return list
    }
  }
})

// 5. 导出实例对象
export default store
